import { selectedKeysByPath } from '@/utils'
import { Menu } from 'antd'
import Layout, { Content } from 'antd/lib/layout/layout'
import Sider from 'antd/lib/layout/Sider'
import React from 'react'
import { Link, Redirect, Route, Switch, useHistory } from 'react-router-dom'

function index() {
  const history = useHistory()
  return (
    <Layout>
      <Sider>
        <Menu style={{
          height: 'calc(100vh - 64px)'
        }} theme="dark" selectedKeys={selectedKeysByPath(history, ["/backup/files", "/backup/media"])}>
          <Menu.Item key="/backup/media">
            <Link to="/backup/media">图片/视频</Link>
          </Menu.Item>
          <Menu.Item key="/backup/files">
            <Link to="/backup/files">文件</Link>
          </Menu.Item>
        </Menu>
      </Sider>
      <Content>
        <Switch>
          <Route path="/backup/files" component={require("./files").default}></Route>
          <Route path="/backup/media" component={require("./media").default}></Route>
          <Redirect to="/backup/media" />
        </Switch>
      </Content>
    </Layout>
  )
}

export default index
